import React, { useEffect, useState } from "react";
import "./style.css";
import {
  Card,
  Cascader,
  Input,
  Button,
  Table,
  message,
  Select,
  Tabs,
} from "antd";

import { getHousingList } from "../../../store/housing";
import { HousingType, ColumsType, StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";
import { apiHousingDel, } from "../../../api";
import { useNavigate } from "react-router-dom";

const { Option } = Select;
const { TabPane } = Tabs;

const Housing = () => {
  // 所有数据
  const housingData = useSelector(
    (state: StoreStateType) => state.PublicReducer.housingList
  );

  const navigate = useNavigate();
  //详情页跳转
  const toDetail = (id: number) => {
    navigate(`/housingdacte/${id}`);
  };

  //跳转新增
  const toAdd = () => {
    navigate('/housingadd')
}

  //tab
  function callback(key: any) {
    console.log(key);
  }

  //删除
  const handleDelete = (id: number) => {
    apiHousingDel({ id }).then((res: any) => {
      if (res.code === 200) {
        message.success(res.mess);
        getHousingList();
      }
    });
  };

 

  const housingColumns: ColumsType[] = [
    {
      title: "序号",
      width: 150,
      fixed: "left",
      render: (text: any, record: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "楼盘名称",
      dataIndex: "name",
      width: 200,
      key: "name",
    },
    {
      title: "详细地址",
      dataIndex: "district",
      width: 200,
      key: "district",
    },
    {
      title: "价格",
      dataIndex: "total_prices",
      width: 200,
    },
    {
      title: "更新时间",
      dataIndex: "time",
      width: 200,
      key: "time",
    },
    {
      title: "状态",
      dataIndex: "state",
      width: 200,
      key: "state",
    },
    {
      title: "经纪人",
      dataIndex: "jjr",
      width: 200,
      key: "jjr",
    },
    {
      title: "操作",
      fixed: "right",
      width: 350,
      render: (v: HousingType) => {
        return (
          <div style={{ display: "flex" }}>
            <Button type="link" onClick={() => toDetail(v.id)}>
              详情
            </Button>
            <Button type="link">
              编辑
            </Button>

            <Button type="link" onClick={() => handleDelete(v.id)}>
              删除
            </Button>

            <Button type="link">指派经纪人</Button>
          </div>
        );
      },
    },
  ];

  useEffect(() => {
    // 获取列表数据
    getHousingList();
  }, []);

  const [value, setValue] = useState("");
  // 搜索
  const searchTable = () => {
    getHousingList({
      value,
    });
  };

  //三级联动数据
  const options = [
    {
      value: "zhejiang",
      label: "Zhejiang",
      children: [
        {
          value: "hangzhou",
          label: "Hangzhou",
          children: [
            {
              value: "xihu",
              label: "West Lake",
            },
          ],
        },
      ],
    },
  ];
  function onChange(value: any) {
    console.log(value);
  }

  return (
    <div className="housingbox">
      <Card style={{ width: 1690 }}>
        <div className="housingsanji">
          <Cascader
            options={options}
            onChange={onChange}
            style={{ width: 300 }}
            placeholder="请选择省份"
          />

          <Cascader
            options={options}
            onChange={onChange}
            style={{ width: 300 }}
            placeholder="请选择城市"
          />

          <Cascader
            options={options}
            onChange={onChange}
            style={{ width: 300 }}
            placeholder="请选择区县"
          />

          <div>
            <Input
              placeholder="请输入关键字"
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value)}
            ></Input>
          </div>

          <div>
            <Button type="primary" style={{ width: 200 }} onClick={searchTable}>
              搜索
            </Button>
          </div>
        </div>
      </Card>

      <Card style={{ width: 1690 }} className="housingbody">
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="销售楼盘" key="1">
            <div className="housingbtn">
              <Button type="primary" onClick={toAdd}>
                新增
              </Button>
            </div>
            <Table
              columns={housingColumns}
              dataSource={housingData}
              className="housingtab"
            />
          </TabPane>
          <TabPane tab="房屋租赁" key="2">
            Content of Tab Pane 2
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};
export default Housing;
